<template>
    <div class="carrier-dashboard">
        <!-- 左半部分 -->
        <div class="left-panel">
            <div
                    v-for="(section, index) in props.sections"
                    :key="index"
                    class="section"
            >
                <div class="section-header">
                    <div class="section-title">{{ section.title }}</div>
                    <div class="section-total">{{ section.total }}</div>
                </div>

                <div class="card-grid">
                    <div
                            v-for="(item, idx) in section.items"
                            :key="idx"
                            class="data-card"
                            @click="goToTable(section.title, item,index)"
                    >
                        <div class="card-name">{{ item.name }}</div>
                        <div class="card-value">{{ formatToWan(item.value) }}</div>
                        <div
                                class="card-growth"
                                :class="{
                up: item.growth > 0,
                down: item.growth < 0
              }"
                        >
                            较上周期: {{ item.growth > 0 ? "+" : "" }}{{ item.growth }}%
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右半部分 -->
        <div class="right-panel">
            <div class="chart-title">载体分布 - 自营</div>
            <div class="chart-wrapper">
                <CarrierPieChart :chart-data="props.sections[0]['items']"/>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {ref, onMounted, watch} from "vue";
    import {useRouter} from "vue-router";  // ✅ 导入 router
    import CarrierPieChart from "./CarrierPieChart.vue"
    import {formatToWan} from '../../utils/number.js'

    const props = defineProps({
        sections: {type: Array, default: []}, //自营合作数据
        start_end_date: {type: {}, default: {}}
    })

    /* ✅ 数据 + 颜色 */
    // const chartData = [
    //     {name: "直播", value: 15368016.39, growth: -45.08, visible: true},
    //     {name: "商品卡", value: 4209505.64, growth: -34.89, visible: true},
    //     {name: "短视频", value: 935730.81, growth: 6.35, visible: true},
    //     {name: "图文", value: 50820.34, growth: 43.56, visible: true},
    //     {name: "其他", value: 167115.65, growth: -23.15, visible: true},
    // ];

    const router = useRouter();

    // ✅ 跳转函数

    const goToTable = (sectionTitle, item, index) => {

        let is_self = "self";
        if (index === 1) {
            is_self = "coop"
        }

        const query = new URLSearchParams({
            section: sectionTitle,
            name: item.name,
            shop_name: item.shop_name,
            is_self: is_self,
            start_end_date: JSON.stringify(props.start_end_date)
        }).toString();
        let targetUrl = `/DouyinProjectAnalysisTable?${query}`;
        if (item.name==="商品卡" && is_self==="self"){
            targetUrl = `/DouyinProjectAnalysisTableSpk?${query}`;
        }else if (item.name==="直播"&& is_self==="self"){
            targetUrl = `/DouyinProjectAnalysisTableZhiBo?${query}`;
        }


        // ✅ 如果在钉钉环境
        if (window.dd) {
            try {
                dd.ready(() => {
                    dd.biz.util.openLink({url: targetUrl});
                });
            } catch (e) {
                // 如果 SDK 没初始化成功则降级处理
                window.location.href = targetUrl;
            }
        } else {
            // ✅ 普通浏览器，打开新标签
            window.open(targetUrl, "_blank");
        }
    };


    onMounted(() => {

    });




</script>

<style scoped>
    .carrier-dashboard {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 30px;
        width: 100%;
        box-sizing: border-box;
        margin: 20px auto;
        padding: 0 20px;
    }

    /* 左半部分 */
    .left-panel {
        flex: 1.2;
    }

    .section {
        margin-bottom: 32px;
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }

    .section-title {
        font-size: 18px;
        font-weight: bold;
    }

    .section-total {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }

    .data-card {
        background: #f8fbff;
        border: 1px solid #cfe3ff;
        border-radius: 8px;
        padding: 10px 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        text-align: left; /* ✅ 全部左对齐 */
        display: flex;
        flex-direction: column; /* ✅ 竖向排列 */
        justify-content: flex-start;
        gap: 4px; /* ✅ 行间距 */
    }

    /* 左上：名称 */
    .card-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 2px;
    }

    /* 中间：数值 */
    .card-value {
        font-size: 18px;
        font-weight: bold;
        color: #000;
    }

    /* 底部：比较上周期 */
    .card-growth {
        font-size: 12px;
        font-weight: 500;
    }

    .card-growth.up {
        color: #dc3545;
    }

    .card-growth.down {
        color: #28a745;
    }

    /* 右半部分 */
    .right-panel {
        /*flex: 1;*/
        /*text-align: center;*/
        display: flex;
        flex-direction: column;
    }

    .chart-title {
        font-weight: bold;
        font-size: 16px;
        /*margin-bottom: 10px;*/
    }


    .chart-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chart-wrapper ::v-deep(.chart) {
        flex: 0 0 40%; /* ✅ 饼图占40% */
    }

    .chart-wrapper ::v-deep(.info-list) {
        flex: 1; /* ✅ 信息区自动占剩余60% */
    }

    /* 📱 移动端适配 */
    @media (max-width: 768px) {
        .carrier-dashboard {
            flex-direction: column;
            gap: 24px;
            padding: 0 10px;
        }

        .left-panel,
        .right-panel {
            width: 100%;
        }

        /* ✅ 关键修改 */
        .chart-wrapper {
            flex-direction: column;
            align-items: center;
        }

        .chart-wrapper ::v-deep(.chart) {
            flex: none;
            width: 260px; /* ✅ 固定宽度 */
            height: 220px; /* ✅ 固定高度 */
        }

        .chart-wrapper ::v-deep(.info-list) {
            width: 100%;
            text-align: center;
            grid-template-columns: 1fr;
        }

        .card-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
